* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: grid;
font-family: Avenir;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
overflow: hidden;
background-color: #151515;
}
.input_control {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
height: 53px;
}
.input_control .elastic_border {
position: absolute;
left: 0;
bottom: 0;
height: 18px;
fill: none;
}
.input_control .elastic_border path {
stroke: #fff;
stroke-width: 2;
}
.input_control .elastic_border path d {
transition: all 0.2s ease;
}
.input_control .check {
position: absolute;
top: 20px;
right: 20px;
fill: none;
transform: translate(0, 9px) scale(0);
transition: all 0.3s cubic-bezier(0.5, 0.9, 0.25, 1.3);
transition-delay: 0.15s;
}
.input_control .check path {
stroke: rgb(65, 148, 243);
stroke-width: 2;
}
.input_control input {
appearance: none;
width: 100%;
border: 0;
font-family: inherit;
padding: 0;
height: 48px;
font-size: 16px;
font-weight: 500;
background: none;
border-radius: 0;
color: #fff;
transition: all 0.15s ease;
}
.input_control input:focus {
outline: none;
}
.input_control input:focus+.elastic_border path {
stroke: rgb(65, 148, 243);
}
.input_control input:valid+.elastic_border path {
animation: elasticInput 0.8s ease forwards;
}
.input_control input:valid+.elastic_border+.check {
transform: translate(0, 0) scale(1);
}
::placeholder {
color: #fff;
}
@keyframes elasticInput {
33% {
d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,1 253,1 C261,1 268,12 278,12 C284.666667,12 285.333333,12 280,12"
);
}
66% {
d: path("M0,12 L226,12 C220,12 220.666667,12 228,12 C239,12 245,17 253,17 C261,17 268,12 278,12 C284.666667,12 285.333333,12 280,12"
);
}
}